 <template>
 	<view>
 		<uNavbar title="专属遗迹" :bgColor="backgroundColor" rightText="奖励说明" @rightClick="goTagglePage"></uNavbar>
 		<view class="secret">
 			<view class="secret_box">
 				<text class="status">{{brandAll.status_desc}}</text>
 				<view class="heat flex_dq">
 					<image src="../../static/image/fire.png" mode=""></image>
 					<text class="c0">参与人数:{{brandAll.involved_number}}</text>
 				</view>
 				<image class="hotimg" :src="brandAll.activity_images" mode=""></image>
 				<view class="official flex_Z">
 					<text>{{brandAll.name}}</text>
 					<text style="font-size: 16rpx;">{{brandAll.start_time}}- {{brandAll.end_time}}</text>
 				</view>
 				<image class="thumbnail" :src="brandAll.details_images" mode=""></image>
 			</view>
 			<view class="introduce flex_Z">
 				<text class="c3">{{brandAll.name}}</text>
 				<text class="c5">专属遗迹</text>
 				<!-- <text>{{item.label || ''}}</text> -->
 			</view>
 		</view>
 		<view class="reward flex_ZC">
 			<text class="c3">探索遗迹可获得丰厚福利</text>
 			<text class="f26 c9">— 持有以下藏品可开启此遗迹  —</text>
 			<view class="cang flex_c">
 				<view v-for="(item,index) in brandCondition" :key="index">
 					<view class="cang_box flex_ZC" v-if="item.condition == 1">
 						<image :src="item.goods.goods_image" mode=""></image>
 						<view class="obtain flex_c" v-if="!item.is_condition" @click="goObtain(item.goods.id)">
 							<text>去获取</text>
 							<u-icon name="arrow-right" color="#A68A64" size="14"></u-icon>
 						</view>
 					</view>
 					<view class="cang_box flex_ZC" v-if="item.condition == 2">
 						<image :src="item.prop.prop_image" mode=""></image>

 						<!-- <view class="obtain flex_c"  @click="goObtain2(item.prop.id)">
 							<text>去获取</text>
 							<u-icon name="arrow-right" color="#A68A64" size="14"></u-icon>
 						</view> -->
 					</view>
 				</view>
 			</view>
			<view class="tip_wrap">
				<view class="tip_wrap_top c3">
					消耗条件
				</view>
				<view class="tip_wrap_bottom">
					<text class="c9">消耗FUL凭证*{{brandAll.ful_number}} </text>
					<image src="../../static/icon/i_ful.png" mode=""></image>
				</view>
			</view>
 			<view class="cycle flex_ZC">
 				<text>探索周期{{brandAll.activity_day}}天</text>
 				<text class="f26 c4">累计可获得福利</text>
 				<view class="cycless">
					<view class="cycleimg " v-for="(item,index) in brandIncome" :key="index">
						<image :src="item.prop.prop_image" mode="aspectFill"></image>
						<text>{{item.prop.prop_name}}*{{item.total_number}}</text>
					</view>
 				</view>
				

 			</view>
 		</view>
 		<view class="log_out flex_c" :class="brandAll.member_is_condition?'bgTaggle':''">
 			<text v-if="brandAll.member_is_condition" @click="showDig = true">开启遗迹探索</text>
 			<text v-if="brandAll.member_is_activity" @click="godetail">活动参与中 点击去查看</text>
 			<text v-if="brandAll.member_is_condition==0&&brandAll.member_is_activity==0" @click="showDig = true">不满足参与条件</text>
 		</view>

 		<!-- 支付弹窗 -->
 		<u-popup :show="showDig" @close="showDig = false" closeable bgColor="transparent">
 			<view class="pay flex_ZC">
 				<text class="c3">开启遗迹探索</text>
 				<text class="c6">选择质押藏品在探索期间不可赎回、转赠、出售。探索进行中，无法退出遗迹</text>
 				<view class="baby flex_dq">
 					<view class="baby_l flex_c">
 						<image :src="brandAll.details_images" mode=""></image>
 					</view>
 					<view class="baby_r flex_Z">
 						<text class="f36 c3">{{brandAll.name}}</text>
 						<text class="f26 c6">藏品可质押数量：{{brandAll.pledge_number}}</text>
						<text class="f26 c6">当前拥有FUL凭证数量：{{brandAll.member_ful_prop_number}}</text>
						
 						<text class="f26 c6">消耗FUL凭证数量：{{brandAll.ful_number}}</text>
 					</view>
 				</view>
				<view class="tipttp c6">
					累计获得:
					<text  style="margin-left: 10rpx;" v-for="item in brandIncome" :key="item.id">
						{{item.prop.prop_name}}*{{item.total_number}}
					</text>
				</view>
				<view class="tipttp c6" >
					每日获得:
					<text  style="margin-left: 10rpx;" 	 v-for="item in brandIncome" :key="item.id"  >{{item.prop.prop_name}}*{{item.number}}</text>
				</view>
 				<!-- 				<view class="pledge flex_ld" >
					<text class="f36 c0">质押份数</ text>
					
					<view v-if="brandAll.status == 2 && brandAll.limit_number>0">
						<u-number-box integer :min="1" :max="brandAll.limit_number" button-size="36" color="#ffffff" bgColor="#2E2A56" iconStyle="color: #ffffff"
							v-model.trim="numbers"disabledInput @overlimit="overLimit"></u-number-box>
					</view>
					<view v-else-if="brandAll.status == 2 && brandAll.limit_number == 0">
						<u-number-box integer :min="1" :max="brandAll.limit_number" button-size="36" color="#ffffff" bgColor="#2E2A56" iconStyle="color: #ffffff"
							v-model.trim="brandAll.limit_number"   @overlimit="overLimit"></u-number-box>
					</view>
					<view v-else>
						<u-number-box integer :min="1" :max="brandAll.limit_number" button-size="36" color="#ffffff" bgColor="#2E2A56" iconStyle="color: #ffffff"
							v-model.trim="numbers"  @overlimit="overLimit"></u-number-box>
					</view>
				</view> -->
 				<view class="buyNow flex_c" @click="goPay">
 					<image class="highlights" src="../../static/image/mask.png" mode=""></image>
 					<text>开启探索</text>
 				</view>
 			</view>
 		</u-popup>
 	</view>
 </template>
 <script>
 	import {
 		brandDetail,
 		addActivity
 	} from "../../api/secretRealm.js";
 	export default {
 		data() {
 			return {
 				id: '',
				backgroundColor: "transparent", //标题背景颜色
 				check: true,
 				showDig: false,
 				numbers: 1,
 				brandAll: {},
 				brandCondition: [],
 				brandIncome: []
 			}
 		},
 		onLoad(e) {
 			console.log(e);
 			this.id = e.id
 			this.initDetail()
 		},
 		methods: {
			godetail(){
				uni.navigateTo({
					url:"/pagesMy/secretRealm/adventureRecord?index="+1
				})
			},
 			// 初始化
 			initDetail() {
 				let data = {
 					id: this.id,
 				}
 				brandDetail(data).then(res => {
 					console.log(11111, res);
 					if (res.code == 1) {
 						this.brandAll = res.data
 						this.brandCondition = res.data.brand_activity_condition
 						this.brandIncome = res.data.brand_activity_income
 					}
 				})
 			},
 			goObtain(id) {
 				uni.navigateTo({
 					url: '/pagesMy/mallCenter/productDetails?id=' + id
 				})
 			},
 			goObtain2(id) {
 				uni.navigateTo({
 					url: '/pagesMy/mallCenter/propDetails?id=' + id
 				})
 			},
 			goPay() {
 				// if(this.brandAll.limit_number == 0){
 				// 	this.showDig = false
 				// 	uni.$u.toast('超出限购数量!');
 				// 	return;
 				// }
 				let data = {
 					id: this.id,
 				}
 				addActivity(data).then(res => {
 					console.log(11111, res);
 					if (res.code == 1) {
 						this.showDig = false
 						uni.$u.toast(res.msg);
 						this.initDetail()
 					}
 				})
 			},
 			// 步进器
 			overLimit(e) {
 				// console.log(e);
 				if (e == 'plus') {
 					uni.$u.toast('超出限购数量');
 				} else {
 					uni.$u.toast('最少限购1个');
 				}
 			},
 			goTagglePage() {
 				uni.navigateTo({
 					url: '/pagesMy/secretRealm/secretRealmRewards?id=' + this.id
 				})
 			},
			// 页面滚动
			onPageScroll: function(e) {
				const scrollTop = e.scrollTop; // 获取页面滚动位置
				// 根据滚动位置修改状态栏样式
				if (scrollTop > 100) {
					this.backgroundColor = '#E0DDDA';
				} else {
					this.backgroundColor = 'transparent';
				}
				// console.log("滚动距离为：" + e.scrollTop);
			},
 		},
 	}
 </script>
 <style scoped lang="scss">
 	@font-face {
 		font-family: 'iconfont2';
 		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
 	}

 	@font-face {
 		font-family: 'iconfont';
 		src: url("~@/iconfont/almm.ttf");
 	}

 	.secret {
 		width: 664rpx;
 		background: #F2F2F2;
 		margin: 20rpx auto 60rpx;
 		border-radius: 40rpx 36rpx 18rpx 18rpx;
 	}

 	.secret_box {
 		position: relative;
 		width: 100%;
 		height: 306rpx;
 		/* background: skyblue; */
 		margin-bottom: 30rpx;
 		border-radius: 40rpx;
 		/* background: linear-gradient(90deg, rgba(203, 39, 230, 0.8), rgba(18, 22, 253, 0.8)); */
 	}

 	.hotimg {
 		width: 100%;
 		height: 100%;
 	}

 	.status {
 		position: absolute;
 		top: 10rpx;
 		left: 60rpx;
 		font-size: 32rpx;
 		color: #ffffff;
 		z-index: 9;
 	}

 	.heat {
 		position: absolute;
 		top: 24rpx;
 		right: 50rpx;
 		z-index: 9;
 		font-size: 28rpx;
 	}

 	.heat>image {
 		width: 28rpx;
 		height: 28rpx;
 		margin-right: 4rpx;
 	}

 	.official {
 		position: absolute;
 		top: 80rpx;
 		left: 0;
 		width: 300rpx;
 		font-size: 72rpx;
 		color: #ffffff;
 		z-index: 9;
 		font-family: iconfont2;
 		margin-left: 30rpx;
 	}

 	.thumbnail {
 		position: absolute;
 		top: 88rpx;
 		right: 50rpx;
 		width: 156rpx;
 		height: 156rpx;
 		border-radius: 30rpx;
 	}

 	.introduce {
 		margin-left: 26rpx;
 		padding-bottom: 20rpx;
 		margin-top: -10rpx;
 	}

 	.introduce>text:nth-child(1) {
 		font-size: 32rpx;
 		margin-bottom: 16rpx;
 	}

 	.introduce>text:nth-child(2) {
	width: 148rpx;
	height: 52rpx;
	background: #dbdad0;
	border-radius:12rpx;
	font-size: 28rpx;
	text-align: center;
	line-height: 52rpx;
 	}

 	.reward {
 		width: 690rpx;
 		background: #F2EFEC;
 		border-radius: 24rpx;
 		margin: 0 auto;
 		padding-bottom: 40rpx;
 	}

 	.reward>text:nth-child(1) {
 		font-size: 40rpx;
 		font-family: 'iconfont2';
 		margin-top: 42rpx;
 		margin-bottom: 10rpx;
 	}

 	.cang {
 		width: 100%;
 		margin: 40rpx auto 0;
 	}

 	.cang_box {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: space-between;
 		width: 100%;
 		height: 220rpx;
 		/* margin-left: 40rpx; */
 	}

 	.cang_box>image {
 		width: 160rpx;
 		height: 156rpx;
 		border-radius: 10rpx;
 	}

 	.obtain {
 		width: 100%;
 		font-size: 26rpx;
 		color: #A68A64;
 	}

 	.cycle {
 		width: 100%;
 		margin-top: 40rpx;
 		display: flex;
 		flex-direction: column;
 	}

 	.cycless {
 		display: flex;
 		justify-content: space-around;
 		width: 670rpx;
 		margin: 0 auto;
 	}

 	.cycle>text:nth-child(1) {
 		font-size: 40rpx;
 		margin-bottom: 10rpx;
 		font-family: 'iconfont';
 		background: linear-gradient(180deg, #AB8E68, #D7BA93);
 		-webkit-background-clip: text;
 		-webkit-text-fill-color: transparent;
 	}

 	.cycleimg {
 		display: flex;
 		align-items: center;
 		flex-direction: column;
 		width: 160rpx;
 		margin-top: 30rpx;
 		justify-content: center;
 	}

 	.cycleimg>image {
 		width: 160rpx;
 		height: 160rpx;
		border-radius: 10rpx;
 	}

 	.cycleimg>text {
		margin-top: 10rpx;
 		width: 160rpx;
 		font-size: 24rpx;
		text-align: center;
		color: #999999;
 	}

 	.log_out {
 		width: 92%;
 		margin: 90rpx auto 0;
		margin-bottom: 50rpx;
 	}


	.log_out>text {
		text-align: center;
		width: 100%;
		background: linear-gradient(274deg, #ab9880 , #d7c4aa );
		color: #ffffff90;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}

	.bgTaggle>text {
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
		color: #ffffff !important;
		background: linear-gradient(274deg, #AB8E68, #D7BA93) !important;
	}




 	.pay {
 		width: 100%;
 		background: #E0DDDA;
 		border-radius: 20rpx 20rpx 0 0;
 		overflow: auto;
 	}

 	.pay>text:nth-child(1) {
 		font-size: 36rpx;
 		margin: 60rpx 0 20rpx;
 	}

 	.pay>text:nth-child(2) {
 		width: 576rpx;
 		text-align: center;
 		font-size: 26rpx;
 	}

 	.baby {
 		width: 690rpx;
 		height: 200rpx;
 		background: #F2EFEC;
 		border-radius: 16rpx;
 		margin: 30rpx auto;
 	}

 	.baby_l {
 		width: 200rpx;
 		height: 200rpx;
 	}

 	.baby_l>image {
 		width: 160rpx;
 		height: 160rpx;
 		border-radius: 10rpx;
 	}

 	.baby_r>text {
 		margin: 6rpx 0;
 	}


 	.buyNow {
 		position: relative;
 		width: 92%;
 		margin: 50rpx auto;
 	}

 	.buyNow>text {
 		text-align: center;
 		width: 100%;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
 		font-size: 32rpx;
 		padding: 20rpx 0;
 		border-radius: 40rpx;
		color: #ffffff;
 	}

 	.pledge {
 		width: 690rpx;
 		margin: 0 auto;
 	}


 	/deep/ .u-navbar__content__right__text {
 		color: #A68A64;
 		font-size: 24rpx !important;
 	}

 	/deep/.u-number-box__minus {
 		background: #3A3673 !important;
 	}

 	/deep/.u-number-box__plus {
 		background: #3A3673 !important;
 	}
	.tip_wrap{
		width: 610rpx;
		height: 170rpx;
		background: #E0DDDA;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		margin: 0 auto ;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
	}
	.tip_wrap_top{
		font-family: iconfont;
		font-weight: 700;
		font-size: 40rpx;
	}
	.tip_wrap_bottom{
		display: flex;
		align-items: center;
		font-weight: 400;
		>text{
			font-size: 26rpx;
			margin-top: 10rpx;
		}
	
		>image{
			width: 34rpx;
			height: 34rpx;
		}
	}
	.tipttp{
		width: 690rpx;
		font-weight: 400;
		font-size: 26rpx;
		display: flex;
		margin-bottom: 20rpx;
	}
 </style>